<template>
  <div>
    <!-- 头部导航 -->
    <van-nav-bar left-arrow fixed>
      <template #left>
        <img class="logo" src="@/assets/images/logo.png" alt="">
      </template>
      <template #right>
        <van-icon name="search" size="0.48rem" color="#fff" @click="$router.push('/search')" />
      </template>
    </van-nav-bar>
    <!-- 频道部分 -->
    <van-tabs v-model="channelId" animated sticky offset-top="1.226667rem" @change="onChange">
      <van-tab v-for="item in channelList" :key="item.id" :title="item.name" :name="item.id">
        <!-- 下拉刷新 -->
        <van-pull-refresh v-model="refreshing" @refresh="pullDownRefreshFn">
          <!-- 上拉加载更多 -->
          <van-list v-model="loading" :finished="done" finished-text="没有更多了" offset="80"
            @load="pullUpLoadMoreFn" :immediate-check="false">
            <ArticleList :arr="articleList" @dislike="dislikeFn" />
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    <!-- 编辑频道图标 -->
    <van-icon name="plus" size="0.45rem" class="moreChannels" @click="show = true" />
    <!-- 添加频道的弹出层 -->
    <van-popup v-model="show" class="edit_wrap" get-container="body">
      <ChannelEdit :userChannelList="channelList" @close-popup="show = false"
        @add-channel="addUserChannelFn" @del-channel="delUserChannelFn"
        @channgeChannelFn="channgeChannelFn">
      </ChannelEdit>
    </van-popup>
  </div>
</template>

<script>
import { getUserChannelListAPI, getArticleListAPI, updateUserChannelListAPI } from '@/api/home'
import ArticleList from './ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'
export default {
  name: 'Home',
  data () {
    return {
      channelId: 0, // 频道id
      channelList: [], // 频道数据
      articleList: [], // 文章列表数据
      loading: false, // 控制上拉每一页的加载状态
      done: false, // 控制整个上拉的加载状态
      nextTime: undefined, // 分页用的时间戳
      refreshing: false, // 控制下拉的加载状态
      show: false // 控制添加频道的弹出层
    }
  },
  methods: {
    // 切换标签请求文章数据
    async onChange () {
      this.loading = this.done = false
      this.nextTime = undefined
      // 获取文章列表
      const res = await getArticleListAPI({ channelId: this.channelId })
      this.articleList = res.data.data.results
    },
    // 上拉加载更多
    async pullUpLoadMoreFn () {
      const res = await getArticleListAPI({
        channelId: this.channelId,
        timestamp: this.nextTime
      })
      const { results, pre_timestamp: timestamp } = res.data.data
      if (timestamp === null || results.length < 10) {
        this.done = true
      }
      this.nextTime = timestamp
      // 合并新 旧数据
      this.articleList = [...this.articleList, ...results]
      this.loading = false
    },
    // 下拉刷新
    async pullDownRefreshFn () {
      const resp = await getArticleListAPI({
        channelId: this.channelId,
        timestamp: this.nextTime
      })
      const { results, pre_timestamp: timestamp } = resp.data.data
      if (timestamp === null || results.length < 10) {
        this.$toast('没了！')
        return
      }
      this.articleList = results
      this.nextTime = undefined
      this.refreshing = false
      this.$toast('刷新成功')
    },
    // 不感兴趣
    async dislikeFn (i) {
      this.articleList.splice(i, 1)
      if (this.articleList.length < 6) {
        // 发请求(需要把上一次后台返回的pre_timestamp带过去，分页)
        const resp = await getArticleListAPI({
          channelId: this.channelId,
          timestamp: this.nextTime
        })
        const { results, pre_timestamp: timestamp } = resp.data.data
        if (timestamp === null || results.length < 10) {
          return
        }
        this.nextTime = timestamp
        // 旧、新 数组 合并 ...
        this.articleList = [
          ...this.articleList,
          ...results
        ]
      }
    },
    // 添加频道
    addUserChannelFn (item) {
      this.channelList.push(item)
      // 调用更新频道的函数
      this.updateUserChannelFn()
    },
    // 删除频道
    delUserChannelFn (index) {
      this.channelList.splice(index, 1)
      // 调用更新频道的函数
      this.updateUserChannelFn()
    },
    // 跟新用户频道
    updateUserChannelFn () {
      // 1. 准备数据
      const channels = this.channelList.reduce((sum, obj, index) => {
        const item = {
          id: obj.id,
          seq: index + 1
        }
        if (item.id !== 0) {
          sum.push(item)
        }
        return sum
      }, [])
      // 2. 调用接口发送数据
      updateUserChannelListAPI({ channels })
    },
    // 进入频道 - 切换频道
    channgeChannelFn (id) {
      this.show = false
      this.channelId = id
    }
  },
  async created () {
    // 获取频道
    let res = await getUserChannelListAPI()
    this.channelList = res.data.data.channels
    // 获取文章列表
    res = await getArticleListAPI({ channelId: this.channelId })
    this.articleList = res.data.data.results
    this.nextTime = res.data.data.pre_timestamp
    console.log(res)
  },
  components: {
    ArticleList,
    ChannelEdit
  }
}
</script>

<style scoped lang="less">
.logo {
  width: 100px;
  height: 30px;
}
/* tab内容距离tab导航的距离 */
/deep/ .van-tabs__content {
  padding-top: 44px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}
// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 60px;
  right: 8px;
  z-index: 999;
}
/* 频道编辑弹出层铺满屏幕 */
.edit_wrap {
  width: 100%;
  height: 100%;
}
</style>
